<template>
  <!-- 内容区域 -->
  <div class="vote_page">
    <div class="vote_content">
      <div class="vote_ranking"></div>
      <div class="vote_ranking_list">
        <Tabs
          v-if="voteInfo.appBizVote.isGroup === 'Y'"
          v-model:active="params.voteGroupId"
          class="mt08"
          @click-tab="onClickTab"
        >
          <Tab
            v-for="item in voteInfo.appBizVoteGroup"
            :key="item.voteGroupId"
            :name="item.voteGroupId"
            :title="item.groupName"
          ></Tab>
        </Tabs>
        <List
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <RankingItem
            :list="list"
            :voteId="route.query.id"
            @handleSubmit="submit"
          />
        </List>
      </div>
    </div>
    <VoteSubmit
      :checkGroup="checkGroup"
      :voteInfo="voteInfo"
      @handleSubmit="submit"
    />
  </div>
  <VoteNav />
</template>
<script setup>
import { getList } from "@/server/business/vote.js";
import { List, Tab, Tabs } from "vant";
import { reactive, ref } from "vue";
import { useRoute } from "vue-router";
import { handleSubmit } from "./components/control.js";
import RankingItem from "./components/rankingItem.vue";
import { store } from "./components/store.js";
import VoteNav from "./components/voteNav.vue";
import VoteSubmit from "./components/voteSubmit.vue";

const route = useRoute();
const loading = ref(false);
const finished = ref(false);
const list = ref([]);
const voteInfo = ref(store.voteInfo);
const checkGroup = ref({});
const params = reactive({
  pageNum: 1,
  pageSize: 10,
  sortType: 1,
  voteGroupId: voteInfo.value.appBizVoteGroup[0]?.voteGroupId || "",
  voteId: route.query.id
});
// 加载候选项列表
const onLoad = () => {
  getSurveyList();
  params.pageNum++;
};
// 获取候选项排名
const getSurveyList = () => {
  getList(params).then((res) => {
    list.value.push(...res.rows);
    loading.value = false; // 加载状态结束
    finished.value = list.value.length >= res.total; // true 数据全部加载完成
  });
};
// 切换分组
const onClickTab = () => {
  params.pageNum = 1;
  list.value = [];
  loading.value = true;
  onLoad();
  checkGroup.value = voteInfo.value.appBizVoteGroup.filter(
    (item) => item.voteGroupId === params.voteGroupId
  )[0];
};
// 提交投票
const submit = () => {
  handleSubmit(() => onClickTab());
};
</script>
<style scoped>
.vote_ranking {
  background: url(../../assets/images/rankingBanner.jpg) no-repeat center bottom;
  background-size: cover;
  height: 18rem;
}

.vote_ranking_list {
  background: var(--van-white);
  border-radius: 1.6rem 1.6rem 0 0;
  margin-top: -2rem;
  overflow: hidden;
}
</style>
